window.onload =function(){

  var box = document.getElementById('box');
  
  /*//1 style属性 只能获取行内style属性的css样式中的宽和高，如果有获取，没有则返回空
  alert(typeof box.style.width);//string
  alert(box.style.height);//210px
  
  //2 获取计算后的css 大小，如果没有设置，非ie会获取默认大小,ie默认为0
  //可以获取行内也可以获取外联
  var style = window.getComputedStyle?window.getComputedStyle(box,null):null||box.currentStyle
   alert(style.width);
   alert(style.height);
	
	//3使用CSSStyleSheet对象中的cssRules属性(rules)
	//无法获取行内和计算后的样式
	var sheet = document.styleSheets[0];
	var rule = (sheet.cssRules||sheet.rules)[0];
	alert(rule.style.width);
	alert(rule.style.height);
	
	//以上三种都无法获取实际的大小（添加内边距等）*/
	
	
	//没有单位，但是默认是px,如果设置了其他单位（em,pt）它还是会返回px 的大小，
	//边框border和外边距margin不计算
	//增加内边距，最终值等于原本大小加上内边距的大小。
	//增加滚动条，最终值等于原本大小减去滚动条的大小
	//在没有内边距和滚动条的情况下，没有设置css的大小，那么ie浏览器会会理解为0
	alert(box.clientWidth);
	alert(box.clientHeight);
	//
	
}
